import React from 'react';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { CiFolderOn, CiFileOn } from 'react-icons/ci';

interface ProjectSettingsProps {
  devProjectPath: string;
  prodProjectPath: string;
  privateKeyPath: string;
  appid: string;
  type: string;
  onSelectDevProjectPath: () => void;
  onSelectProdProjectPath: () => void;
  onSelectPrivateKeyPath: () => void;
  onAppidChange: (value: string) => void;
  onTypeChange: (value: string) => void;
  onSaveConfig: () => void;
  loading: boolean;
}

const ProjectSettings: React.FC<ProjectSettingsProps> = ({
  devProjectPath,
  prodProjectPath,
  privateKeyPath,
  appid,
  type,
  onSelectDevProjectPath,
  onSelectProdProjectPath,
  onSelectPrivateKeyPath,
  onAppidChange,
  onTypeChange,
  onSaveConfig,
  loading,
}) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>项目设置</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="devProjectPath">开发环境项目路径</Label>
          <div className="flex gap-2">
            <Input
              id="devProjectPath"
              value={devProjectPath}
              readOnly
              className="flex-1"
              placeholder="选择开发环境小程序项目目录"
            />
            <Button onClick={onSelectDevProjectPath} variant="secondary">
              <CiFolderOn className="h-4 w-4 mr-1" />
              浏览
            </Button>
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="prodProjectPath">正式环境项目路径</Label>
          <div className="flex gap-2">
            <Input
              id="prodProjectPath"
              value={prodProjectPath}
              readOnly
              className="flex-1"
              placeholder="选择正式环境小程序项目目录"
            />
            <Button onClick={onSelectProdProjectPath} variant="secondary">
              <CiFolderOn className="h-4 w-4 mr-1" />
              浏览
            </Button>
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="privateKeyPath">私钥路径</Label>
          <div className="flex gap-2">
            <Input
              id="privateKeyPath"
              value={privateKeyPath}
              readOnly
              className="flex-1"
              placeholder="选择代码上传密钥文件"
            />
            <Button onClick={onSelectPrivateKeyPath} variant="secondary">
              <CiFileOn className="h-4 w-4 mr-1" />
              浏览
            </Button>
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="appid">小程序 AppID</Label>
          <Input
            id="appid"
            value={appid}
            onChange={(e) => onAppidChange(e.target.value)}
            placeholder="wx..."
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="type">项目类型</Label>
          <Select value={type} onValueChange={onTypeChange}>
            <SelectTrigger id="type">
              <SelectValue placeholder="选择项目类型" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="miniProgram">小程序</SelectItem>
              <SelectItem value="miniProgramPlugin">小程序插件</SelectItem>
              <SelectItem value="miniGame">小游戏</SelectItem>
              <SelectItem value="miniGamePlugin">小游戏插件</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </CardContent>
      <CardFooter>
        <Button onClick={onSaveConfig} disabled={loading}>
          保存配置
        </Button>
      </CardFooter>
    </Card>
  );
};

export default ProjectSettings;